<template>
  <div id="addAppPage">
    <a-form
      :model="addAppForm"
      style="max-width: 480px; margin: 0 auto"
      @submit="handleSubmit"
      auto-label-width
      lebal-align="left"
    >
      <h2 style="margin-bottom: 36px">创建应用</h2>
      <a-form-item field="name" label="应用名称">
        <a-input
          v-model="addAppForm.appName"
          placeholder="请输入您的应用名称"
          :style="{ width: '320px' }"
        />
      </a-form-item>
      <a-form-item field="name" label="应用描述">
        <a-input
          v-model="addAppForm.appDesc"
          placeholder="请输入您的应用描述"
          :style="{ width: '320px' }"
        />
      </a-form-item>
      <a-form-item field="name" label="应用图标">
        <picture-uploader
          biz="appIcon"
          :value="addAppForm.appIcon"
          @change="handleUploadSuccess"
        ></picture-uploader>
      </a-form-item>
      <a-form-item field="name" label="应用类型">
        <a-select :style="{ width: '320px' }" v-model="addAppForm.appType">
          <a-option
            v-for="(value, key) in APP_TYPE_MAP"
            :key="key"
            :value="Number(key)"
            :label="value"
          >
          </a-option>
        </a-select>
      </a-form-item>
      <a-form-item field="name" label="评分策略">
        <a-select
          :style="{ width: '320px' }"
          v-model="addAppForm.scoringStrategy"
        >
          <a-option
            v-for="(value, key) in APP_SCORING_STRATEGY_MAP"
            :key="key"
            :value="Number(key)"
            :label="value"
          >
          </a-option>
        </a-select>
      </a-form-item>
      <a-form-item>
        <a-button html-type="submit" type="primary">提交</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { defineProps, ref, watchEffect, withDefaults } from "vue";
import message from "@arco-design/web-vue/es/message";
import { useRouter } from "vue-router";
import API from "@/api";
import { APP_SCORING_STRATEGY_MAP, APP_TYPE_MAP } from "@/constant/app";
import {
  addAppUsingPost,
  editAppUsingPost,
  getAppVoByIdUsingGet,
} from "@/api/appController";
import PictureUploader from "@/components/PictureUploader.vue";

interface Props {
  id: any;
}

const props = withDefaults(defineProps<Props>(), {
  id: () => {
    return 0;
  },
});
// 处理上传成功后的回调
const handleUploadSuccess = (url: any) => {
  addAppForm.value.appIcon = url; // 更新父组件中的 URL
};
/**
 * 加载数据
 */
const oldAppData = ref<API.AppVO>({});
const loadData = async () => {
  if (!props.id) {
    return;
  }
  const res = await getAppVoByIdUsingGet({ id: props.id });
  if (res.data.code === 0) {
    oldAppData.value = res.data.data || {};
    addAppForm.value = res.data.data || {};
  } else {
    message.error("获取数据失败，" + res.data.message);
  }
};
watchEffect(() => {
  loadData();
});
/**
 * 表单信息
 */
const addAppForm = ref({
  appName: "",
  appDesc: "",
  appIcon: "",
  appType: 0,
  scoringStrategy: 0,
} as API.AppAddRequest);
const router = useRouter();

/**
 * 提交表单
 * @param data
 */
const handleSubmit = async () => {
  let res: any;
  if (props.id) {
    res = await editAppUsingPost({
      id: props.id as any,
      ...(addAppForm.value as any),
    });
  } else {
    res = await addAppUsingPost(addAppForm.value);
  }
  if (res.data.code === 0) {
    message.success("操作成功,跳转值详情页...");
    addAppForm.value = {
      appName: "",
      appDesc: "",
      appIcon: "",
      appType: 0,
      scoringStrategy: 0,
    };
    setTimeout(() => {
      router.push(`/app/detail/${props.id ?? res.data.data}`);
    }, 2000);
  } else {
    message.error("操作失败，" + res.data.message);
  }
};
</script>
